<template>
  <div id="app">
    <!--查询-->
    单据号:
    <el-input v-model="ReturnNumber" style="width:120px;"></el-input>供应商:
    <el-select v-model="bname" placeholder="请选择">
      <el-option
        v-for="bean in supplierList"
        :label="bean.name"
        :key="bean.name"
        :value="bean.name"
      ></el-option>
    </el-select>是否付款:
    <el-select v-model="state" placeholder="请选择" style="width:100px">
      <el-option v-for="bean in stateList" :label="bean.name" :key="bean.id" :value="bean.id"></el-option>
    </el-select>日期:
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="startTime"
      style="width:180px;"
    ></el-date-picker>至
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="endTime"
      style="width:180px;"
    ></el-date-picker>
    <el-button type="infor" size="medium" @click="list()">查 询</el-button>
    <!--进货信息列表-->
    <el-table :data="dataList" tooltip-effect="dark" style="width: 100%" @row-click="openDetails">
      <el-table-column prop="customerReturnNumber" label="进货单号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="customerReturnDate" label="进货日期" show-overflow-tooltip></el-table-column>
      <el-table-column prop="bname" label="供应商" show-overflow-tooltip></el-table-column>
      <el-table-column prop="amountPaid" label="进货金额" show-overflow-tooltip></el-table-column>
      <el-table-column prop="userName" label="操作员" show-overflow-tooltip></el-table-column>
      <el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="danger" @click="delPurchase(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <br />
    <br />
    <br />
    <br />
    <!--进货商品列表-->
    <el-table :data="goodList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="code" label="商品编码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="model" label="商品型号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="price" label="单价" show-overflow-tooltip></el-table-column>
      <el-table-column prop="num" label="数量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unit" label="单位" show-overflow-tooltip></el-table-column>
      <el-table-column prop="total" label="总金额" show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>

<script>
var quan;
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      dataList: [],
      state: "",
      bname: "",
      ReturnNumber: "",
      startTime: "",
      endTime: "",
      supplierList: [],
      stateList: [
        {
          id: "1",
          name: "已付"
        },
        {
          id: "2",
          name: "未付"
        }
      ],
      goodList: []
    };
  },
  mounted: function() {
    quan = this;
    // quan.list();
    quan.axios
      .get("http://localhost:9999/biz/tCustomer/getCustomer", {
        params: {
          access_token: localStorage.getItem("access_token")
        }
      })
      .then(function(res) {
        quan.supplierList = res.data.obj;
      });
  },
  methods: {
    list: function() {
      quan.axios
        .get("http://localhost:9999/biz/tCustomerReturnList/getReturnList", {
          params: {
            access_token: localStorage.getItem("access_token"),
            bname: quan.bname,
            state: quan.state,
            ReturnNumber: quan.ReturnNumber,
            startTime: quan.startTime,
            endTime: quan.endTime
          }
        })
        .then(function(res) {
          quan.dataList = res.data.obj;
        });
    },
    openDetails: function(row) {
      //console.info(row.id);
      quan.axios
        .get("http://localhost:9999/biz/tCustomerReturnList/getReturnGoodsById?id=" + row.id, {
          params: {
            access_token: localStorage.getItem("access_token")
          }
        })
        .then(function(res) {
          quan.goodList = res.data.obj;
        });
    },
    delPurchase: function(row) {
      var $this = this;
      quan.axios
        .get(
          "http://localhost:9999/biz/tCustomerReturnList/deleteReturnGoodsById?id=" + row.id,
          {
            params: {
              access_token: localStorage.getItem("access_token")
            }
          }
        )
        .then(function(res) {
          $this.$message(res.data.msg);
          location.reload();
        });
    }
  }
};
</script>